import React from 'react';
import {
  Row,
  Col,
  Table,
  Icon
} from 'antd';
import axios from 'axios';
import intercept from '../../utils/intercept';
import { config } from 'utils';
import { Input } from 'antd';
import moment from 'moment'
import InsuranceOrderList from './InsuranceOrderList'
import './less/common.less'

export default class InsuranceOrder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dataSource: [],
      loading: false,
      pagination: {
        current: 1,
        pageSize: 10
      },
      onChange: this.onChange,
      keyword: ''
    };
  };

  componentDidMount() {
    this.getOrderInfo();
  };

  search(value) {
    this.setState({ keyword: value });
    this.getOrderInfo({ keyword: value });
  }

  onChange = (pagination, filters, sorter) => {
    this.getOrderInfo({
      sortField: sorter.field,
      sortOrder: sorter.order,
      page: pagination.current,
      keyword: this.state.keyword,
      ...filters
    });
  };

  getOrderInfo = (params = {}) => {
    const token = sessionStorage.getItem("token");
    this.setState({ loading: true });
    var keyword = typeof (params.keyword) === "undefined"
      ? ''
      : params.keyword;
    axios
      .get(`${config.api}CustomService/GetInsuranceMain?page=${params.page}&pageSize=${this.state.pagination.pageSize}&keyword=${keyword}`,{headers:{Authorization:'Bearer ' + token}})
      .then((data) => {
        const pagination = {
          ...this.state.pagination
        };
        // console.log(data);
        pagination.total = data.data.pageList.totalRows;
        pagination.current = params.page;
        this.setState({ loading: false, dataSource: data.data.pageList.collections, pagination });

      })
      .catch(err => {
        intercept;
      })
  };


  render() {
    const Search = Input.Search;
    const columns = [
      {
        title: '订单号',
        dataIndex: 'orderCode',
        width: 150
      }, {
        title: '保险类型',
        dataIndex: 'insureType',
        width: 150
      }, {
        title: '用户电话',
        dataIndex: 'userPhone',
        width: 150
      }, {
        title: '参保人数',
        dataIndex: 'insurePersons',
        width: 150
      }, {
        title: '保费',
        dataIndex: 'insureAmount',
        width: 150
      },{
        title: '保额',
        dataIndex: 'maxAmount',
        width: 150
      }, {
        title: '参保时间',
        dataIndex: 'applyTime',
        width: 150,
        render:(text, record) => {
            return(
              <span>{new moment(record.applyTime).format('YYYY-MM-DD hh:mm')}</span>
            )
        }
      },{
        title:'有效期',
        dataIndex: 'period',
        width: 150
      } ,{
        title: '操作',
        width: 150,
        key: 'action',
        render: (text, record) => {
          return(
            <span>
            <a>编辑</a>
            <span className="ant-divider" />
            <a  className="ant-dropdown-link">
              更多操作
              <Icon type="down" />
            </a>
          </span>
          )
      }
      }
    ];
    const className = "components-table-demo-nested";
    const expandedRowRender = record => <InsuranceOrderList ordercode={record.orderCode} />; //<p>{record.orderCode}</p>;
    const scroll = {
      y: 600
    };

    return (
      <div className="orderinfo">
        <Row gutter={8} style={{
          marginTop: '20px'
        }}>
          <Col span={24}>
            <div className="insurance">
              <Search
                placeholder="请输入任意查询条件"
                style={{
                  width: 600,
                  height:"34px"
                }}
                onSearch={value => this.search(value)} />

            </div>
            <Table
              {...this.state}
              bordered={false}
              expandedRowRender = {expandedRowRender}
              className={className}
              rowKey = {(record) => { return record.id}}
              columns={columns}
              scroll={scroll} />
          </Col>
        </Row>
      </div>
    )
  }
}
